<template>
  <div class="nav_bar">
    <div class="left">
      <slot name="left"></slot>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang='less' scoped>
.nav_bar {
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 44px;

  .left,
  .right {
    width: 60px;
  }
  .content {
    flex: 1;
    color: #fff;
  }
}
</style>